<style scoped lang="scss">
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .layout-global{
        background: url(./assets/bglogin.jpg) no-repeat;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; 
    }
</style>
<template>
    <div v-if="login">
        <div class="layout">
            <Header :style="{background: '#464c5b', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                <H1 :style="{color:'#fff',textAlign:'center'}">eShop后台管理系统</H1>
            </Header>
            <Layout :style="{minHeight: '100vh'}">
                <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                    <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
                        <MenuItem name="1-1">
                            <router-link to="/" active-class="active" exact>
                                <Icon type="ios-home"></Icon>
                                <span>首页管理</span>
                            </router-link>
                        </MenuItem>
                        
                        <MenuItem name="1-2">
                            <router-link to="/cate" active-class="active">
                                <Icon type="android-folder"></Icon>
                                <span>分类管理</span>
                            </router-link>
                        </MenuItem>
                        <MenuItem name="1-3">
                            <router-link to="/user" active-class="active">
                                <Icon type="android-people"></Icon>
                                <span>用户管理</span>
                            </router-link>
                        </MenuItem>
                        <MenuItem name="1-4">
                            <router-link to="/news" active-class="active">
                                <Icon type="ios-paper"></Icon>
                                <span>新闻管理</span>
                            </router-link>
                        </MenuItem>
                        <MenuItem name="1-5">
                            <router-link to="/product" active-class="active">
                                <Icon type="bag"></Icon>
                                <span>产品管理</span>
                            </router-link>
                        </MenuItem>
                    </Menu>
                </Sider>
                <Layout>
                    <Content :style="{padding: '0 16px 16px'}">
                        <div>
                            <Breadcrumb :style="{margin: '16px 0'}">
                                当前位置：
                                <BreadcrumbItem v-if="(this.$route.matched)[0].path=='/cate'">分类管理</BreadcrumbItem>
                                <BreadcrumbItem v-if="(this.$route.matched)[0].path=='/user'">用户管理</BreadcrumbItem>
                                <BreadcrumbItem v-if="(this.$route.matched)[0].path==''">首页</BreadcrumbItem>
                                <BreadcrumbItem v-if="(this.$route.matched)[0].path=='/news'">新闻管理</BreadcrumbItem>
                                <BreadcrumbItem v-if="(this.$route.matched)[0].path=='/product'">产品管理</BreadcrumbItem>
                            </Breadcrumb>
                        </div>
                        <Card>
                            <div style="height: 800px">
                                
                                <router-view></router-view>

                            </div>
                        </Card>
                    </Content>
                    <Footer style="text-align:center">团队拥有@叼毛君丶&nbsp@一只鱼&nbsp@liliziyi&nbsp@zhupp034&nbsp@JulyCat</Footer>
                </Layout>
            </Layout>
        </div>
    </div>
    <div v-else class="layout-global">
        <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <FormItem prop="name">
                    <Input type="text" v-model="formInline.name" placeholder="Username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <br>
                <FormItem prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="Password">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <br>
                <FormItem style="text-align:center">
                    <Button type="primary" @click="handleSubmit('formInline')" style="width:185px">登录</Button>
                </FormItem>
            </Form>
        </Row>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex';
    export default {
        data () {
            return {
                isCollapsed: false,
                formInline: {
                    name: '',
                    password: ''
                },
                ruleInline: {
                    name: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                }
            };
        },
        computed: {
            ...mapGetters(['login']),
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            ...mapActions(['checkLogin']),
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.post(`http://10.31.153.35:3000/users/list`,this.formInline)
                        .then(res=>{
                            if(res.data.status==404){
                                     this.$Message.info(res.data.msg);
                            }else{      
                                sessionStorage.login=true;
                                this.checkLogin( sessionStorage.login);    
                                this.$Message.success('登录成功');
                            }
                        })                      
                        // localStorage.login = true;                       
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            }

        },
        created(){
            sessionStorage.login = false;
            this.checkLogin(localStorage.login);
        }
    }
</script>

<style>
    .active{
        color:white;
    }
</style>
